<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>demo2</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
	th,td{
		width:150px;
		height:30px;
		text-align: center;
		vertical-align: middle;
	}
</style>
<body>
	<table  border="1" cellspacing="1" cellpadding="1" id="app">
 
		<caption style="font-size: 20px;padding-bottom: 20px;">DEMO示例3</caption>
 
		<tr>
			<th>序号</th>
			<th>书籍名称</th>
			<th>出版日期</th>
			<th>价格</th>
			<th>购买数量</th>
			<th>操作</th>
		</tr>
 
		<tr v-for="(item,index) in books" >
			<td>{{item.xuhao}}</td>
			<td>{{item.shujimingcheng}}</td>
			<td>{{item.chubanriqi}}</td>
			<td>￥<span class="priceClass">{{item.jiage}}</span></td>
			<td>
				<button @click="subNum(index)">-</button>
				<span class="numClass">{{item.goumaishuliang}}</span>
				<button @click="addNum(index)">+</button>
			</td>
			<td><button  @click="removeNum(index)">移除</button></td>
		</tr>
 
		<tr>
			<th>总价：</th>
			<td colspan="5" style="font-weight: bold;">￥{{totalPrice}}</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			books: [
				{ xuhao: 0, shujimingcheng: '《算法导论》', chubanriqi: "2006-9", jiage: 85,goumaishuliang:1},
				{ xuhao: 1, shujimingcheng: '《UNIX编程艺术》', chubanriqi: "2006-2", jiage: 59,goumaishuliang:1 },
				{ xuhao: 2, shujimingcheng: '《编程大全》', chubanriqi: "2008-10", jiage: 39,goumaishuliang:1 },
				{ xuhao: 3, shujimingcheng: '《代码大全》', chubanriqi: "2006-3", jiage: 128,goumaishuliang:1 }
			],
			totalPrice:312
		},
		methods: {
			subNum: function (index) {
				var num = this.books[index].goumaishuliang;
				var price = this.books[index].jiage;
				if(num>0){//到0时不能再减
					this.books[index].goumaishuliang--;
					this.totalPrice = this.totalPrice - price;
				}else{
					alert("数量不能为负数")
				}
			},
			addNum: function (index) {
				var price = this.books[index].jiage;
				this.books[index].goumaishuliang++;
				this.totalPrice = this.totalPrice + price;
			},
			removeNum: function (index) {
				var num = this.books[index].goumaishuliang;
				var price = this.books[index].jiage;
				this.books[index].goumaishuliang = 0;
				this.totalPrice = this.totalPrice - price*num;
			}
		}
	});
</script>
</html>